<template>
	<view>
		<u-popup :show="true" @close="Shut">
			<view class="uPopup">
				<view class="noMoney" v-if="pageData.pay_state == 0">{{ pageData.pay_text }}</view>
				<view class="Box">
					<text class="black size28">仓单价格</text>
					<text class="black size54">{{ pageData.wenpiao_price }}</text>
					<view class="Valmoney">
						<view
							class="iconfont icon-jianhao size36 Controls"
							@click.stop="reduce"></view>
						<input type="numeric" disabled class="numeric" v-model="num" />
						<view class="iconfont icon-jiahao size36 Controls" @click.stop="Add"></view>
					</view>
					<text class="color_ff4 size26 m-top10" v-if="pageData.wenpiao_service"
						>手续费：{{ pageData.wenpiao_service }}</text
					>
					<view class="Accountbox">
						<input
							type="text"
							class="Account"
							v-model="account"
							placeholder-class="place"
							placeholder="请输入交易账户" />
					</view>
					<view class="PlayBtn" :class="{ bgcolor: Agree }" @click="playBtn"
						>支付 {{ pageData.payment }}</view
					>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: 'buyTicket',
		data() {
			return {
				account: '',
				num: 1,
				pageData: '',
			};
		},
		created() {
			this.scanWenPiao();
		},
		methods: {
			scanWenPiao() {
				this.$http
					.post({
						url: '/cqzmqmH5Api/scanWenPiao',
						data: {
							num: this.num,
						},
					})
					.then((res) => {
						if (res.errcode != 100) return this.$Toast(res.msg);
						const result = res.data;
						this.pageData = result;
					});
			},

			playBtn() {
				if (this.pageData.pay_state == 0 || this.num < 1 || !this.account) return;
				this.$http
					.post({
						url: '/cqzmqmH5Api/buyWenPiao',
						data: {
							num: this.num,
							userId: this.account,
						},
					})
					.then((res) => {
						if (res.errcode != '100') return this.$Toast(res.msg);
						this.$Toast(res.msg);
						this.Shut();
					});
			},

			Add() {
				this.num++;
				this.scanWenPiao();
			},
			reduce() {
				if (this.num <= 1) return;
				this.num--;
				this.scanWenPiao();
			},
			Shut() {
				this.$emit('Shut');
			},
		},
		computed: {
			...mapState(['color']),
			Agree() {
				if (this.num >= 1 && this.account && this.pageData.pay_state == 1) return true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.uPopup {
		width: 100%;
		padding-bottom: 34rpx;

		.noMoney {
			width: 100;
			height: 60rpx;
			background-color: #ffcccc;
			color: #ff1362;
			font-size: 26rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.Box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx;

			.Valmoney {
				width: 330rpx;
				height: 80rpx;
				border: 1px solid #f2f2f2;
				border-radius: 40rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;

				.Controls {
					color: #333;
					padding: 20rpx;
				}

				.numeric {
					height: 100%;
					flex: 1;
					color: #000;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
					line-height: 80rpx;
				}
			}

			.Accountbox {
				width: 330rpx;
				height: 80rpx;
				border: 1px solid #f2f2f2;
				border-radius: 40rpx;
				margin-top: 20rpx;

				.Account {
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 80rpx;
					color: #000;
					font-size: 28rpx;
				}

				/deep/.place {
					color: #ccc;
				}
			}

			.PlayBtn {
				width: 400rpx;
				height: 80rpx;
				background-color: #999999;
				color: #fff;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>
